<template>
	<view class="container">
		<view class="title-content">
			<view class="title-bar uni-flex"
				:style="{paddingTop: stateHeight + 'px', height: navHeight + 'rpx', lineHeight: navHeight + 'rpx'}">
				<image :src="backArrow" class="title-back" @tap="turnBack"></image>
				<view class="title-content">
					<image v-if="detailData.status === 'REFUNDED'" :src="moneyIcon" class="title-icon"></image>
					<image v-else-if="detailData.status === 'UNPAID'" :src="timeIcon" class="title-icon"></image>
					<image v-else :src="successIcon" class="title-icon"></image>
					<text class="title-text">{{detailData.statusTrans}}</text>
				</view>
			</view>
		</view>
		<view class="top-content info-box">
			<!-- 待缴费 -->
			<view v-if="detailData.status === 'UNPAID'">
				<!-- 这一版暂时去掉 -->
			<!-- 	<view class="info-line uni-flex">
					<text class="info-title">缴费时间：</text>
					<text class="info-text">{{detailData.paymentTime}}</text>
				</view>
				<view class="info-line uni-flex">
					<text class="info-title">缴费地点：</text>
					<text class="info-text">{{detailData.course.address}}</text>
				</view> -->
				<view class="top-info info-line uni-flex">
					<text class="info-title">缴费金额：</text>
					<text class="info-text text-important">￥{{detailData.paymentPrice || ''}}</text>
				</view>
			</view>
			<!-- 报名成功 -->
			<view v-if="detailData.status === 'REGISTERED'">
				<view class="info-line">课程安排</view>
				<view class="info-line uni-flex">
					<text class="info-title">班级名称:</text>
					<text class="info-text">{{detailData.course.classInfo.name}}</text>
				</view>
				<view class="info-line uni-flex">
					<text class="info-title">上课教室:</text>
					<text class="info-text">{{detailData.course.classInfo.classroom}}</text>
					<!-- <image :src="guideIcon" class="info-icon"></image> -->
				</view>
				<view class="top-info info-line uni-flex">
					<text class="info-title">开班时间:</text>
					<text class="info-text">{{detailData.course.classInfo.openClassTime}}</text>
				</view>
			</view>
			<!-- 退款成功 -->
			<view v-if="detailData.status === 'REFUNDED'">
				<view class="info-line">退款成功</view>
				<view class="info-line uni-flex" style="-webkit-justify-content: space-between; justify-content: space-between;">
					<text>退款金额:{{detailData.refundPrice}}元</text>
					<text>退款时间:{{detailData.refundTime}}</text>
				</view>
				<!-- todo: 点击事件 -->
				<view class="top-info info-line uni-flex" @tap="showVoucher">
					<text class="info-title">查看凭证></text>
				</view>
			</view>

		</view>
		<view class="info-box" @tap="goPage('/pages/school/detail/index',{id: id,type: 'course'})">
			<view class="content-box uni-flex">
				<view class="uni-flex content-box-left">
					<image class="content-image" :src="detailData.course.cover"></image>
				</view>
				<view class="uni-flex uni-column content-box-right">
					<view class="content-text">
						<text>
							{{detailData.course.name}}
						</text>
					</view>
					<view class="content-tag">
						<uni-tag :text="`${detailData.course.courseNodes}节`"
							custom-style="font-size: 24rpx; background-color: #ffffff; border-color: #F5C834; color: #F5C834;">
						</uni-tag>
					</view>
				</view>
			</view>
			<view class="fee-box">
				<view class="fee-item uni-flex">
					<text>已付预约费：</text>
					<text class="fee-value">{{detailData.course.priceWithScore}}积分</text>
				</view>
				<view class="fee-item uni-flex" v-if="detailData.status === 'UNPAID'">
					<text>待付报名费：</text>
					<text class="fee-value">{{detailData.course.priceWithCash}}元(线下缴费)</text>
				</view>
				<!-- 报名成功 -->
				<view class="fee-item uni-flex" v-if="detailData.status === 'REGISTERED'">
					<text>已付报名费：</text>
					<text class="fee-value">{{detailData.course.priceWithCash}}元(线下缴费)</text>
				</view>
				<view class="fee-item uni-flex" v-if="detailData.status === 'REGISTERED'">
					<text>收据号码：</text>
					<text class="fee-value">{{detailData.paymentReceiptNo}}</text>
				</view>
				<!-- 已退款 -->
				<!-- <view class="fee-item refund-text" v-if="detailData.status === 'refund'">
					<text>金额已原路退回</text>
				</view> -->
			</view>
		</view>
		<view class="info-box">
			<view class="info-line uni-flex">
				<text class="info-title community-title">服务机构</text>
				<text class="community-info">{{detailData.course.institutionName}}</text>
				<image :src="phoneIcon" class="community-icon" @tap="phoneCall"></image>
			</view>
			<view class="info-line uni-flex">
				<text class="info-title community-title">所属社区</text>
				<text class="community-info">{{detailData.community.name || ''}}</text>
			</view>
		</view>
		<view class="info-box">
			<view class="info-line uni-flex">
				<text class="info-title order-title">订单号码：</text>
				<!-- todo: 参数？ -->
				<text class="order-info">{{detailData.orderNo}}</text>
				<uni-tag text="复制" @tap="clipOrder"
					custom-style="font-size: 24rpx; background-color: #E2E2E2; border-color: #E2E2E2; color: #4D4D4D;">
				</uni-tag>
			</view>
			<view class="info-line uni-flex">
				<text class="info-title order-title">预约时间：</text>
				<text class="order-info">{{detailData.registrationTime}}</text>
			</view>
			<!-- 报名成功 已退款 -->
			<view class="info-line uni-flex" v-if="detailData.status === 'REGISTERED' || detailData.status === 'REFUNDED'">
				<text class="info-title order-title">报名时间：</text>
				<text class="order-info">{{detailData.registrationTime}}</text>
			</view>
			<!-- 退款成功 -->
			<view class="info-line uni-flex" v-if="detailData.status === 'REFUNDED'">
				<text class="info-title order-title">退款时间：</text>
				<text class="order-info">{{detailData.refundTime}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {getRegistrationDetail} from '@/http/api.js';
	
	export default {
		data() {
			return {
				backArrow: require('@/static/image/user/back-arrow.png'), // 返回按钮
				successIcon: require('@/static/image/user/success.png'), // 报名成功图标
				timeIcon: require('@/static/image/user/time.png'), // 待缴费图标
				moneyIcon: require('@/static/image/user/money.png'), // 退款图标
				phoneIcon: require('@/static/image/user/phone.png'), // 电话图标
				guideIcon: require('@/static/image/user/guide.png'), // 导航图标
				stateHeight: 0, // 状态栏高度
				navHeight: 80, // 导航栏高度
				detailData: {}, // 详情数据
				status: '' ,// 状态 unpaid-待缴费 registered-已报名 refund-已退款
				id: ''
			}
		},
		onShow() {
			this.stateHeight = uni.getSystemInfoSync().statusBarHeight
			// #ifdef MP-WEIXIN
			let menuStyle = uni.getMenuButtonBoundingClientRect()
			console.log(menuStyle)
			let that = this
			if (menuStyle) {
				this.navHeight = menuStyle.height * 2 + (menuStyle.top - this.stateHeight) * 2
			}
			// #endif
		},
		onLoad(e) {
			this.id = e.id || ''
			// 获取详情数据
			if (e && e.id) {
				this.$request({
					url: getRegistrationDetail,
					data: {
						id: e.id
					}
				}).then((res) => {
					console.log(res)
					const stateList = {
						UNPAID: '待缴费',
						REGISTERED: '报名成功',
						REFUNDED: '已退款'
					}
					this.detailData = {
						...res,
						statusTrans: stateList[res.status] // 状态翻译值
					}
				})
			}
		},
		methods: {
			// 返回上一页
			turnBack() {
				uni.navigateBack()
			},
			// 复制订单号码
			clipOrder() {
				uni.setClipboardData({
					data: this.detailData.orderNo
				})
			},
			// 拨打门店号码
			phoneCall() {
				uni.makePhoneCall({
				    phoneNumber: this.detailData.course.institutionMobile
				});
			},
			// 查看退款凭证
			showVoucher() {
				uni.previewImage({
				    urls: [this.detailData.refundVoucher]
				})
			},
			// 查看课程详情页
			toCourseDetail(){
				console.log(56,this.id)
				uni.navigateTo({
					url: `/pages/school/detail/index?classid=${encodeURIComponent(JSON.stringify(this.id))}&type=course`
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-image: url('@/static/image/user/detail-background.png');
		background-size: 100%;
		background-repeat: no-repeat;
	}
	// .title-background {
	// 		// position: absolute;
	// 		// top: 0;
	// 		width: 100%;
	// 		height: 340rpx;
	// 		z-index: -1111;
	// }
	.title-content {
		.title-bar {
			
			align-items: center;
			color: #FFFFFF;

			.title-back {
				padding-left: 28rpx;
				width: 18rpx;
				height: 32rpx;
			}

			.title-content {
				flex: 1;
				display: flex;
				text-align: center;
				align-items: center;
				justify-content: center;

				.title-icon {
					padding-right: 14rpx;
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}

	.info-box {
		color: #333333;
		font-size: 30rpx;
		justify-content: space-between;
		background-color: #FFFFFF;
		margin: 22rpx 18rpx;
		padding: 26rpx 26rpx 0rpx;
		border-radius: 16rpx;

		.info-line {
			padding-bottom: 44rpx;
			.info-title {
				font-size: 30rpx;
			}
			.info-text {
				flex: 1;
				text-align: right;
			}
			.text-important {
				color: #FF6C25;
			}
			.info-icon {
				width: 36rpx;
				height: 36rpx;
			}
			.community-title {
				width: 146rpx;
			}
			.community-info {
				flex: 1;
				font-size: 28rpx;
				color: #4D4D4D;
			}
			.community-icon {
				width: 48rpx;
				height: 48rpx;
			}
			.order-title, .order-info {
				color: #4D4D4D;
				font-size: 28rpx;
			}
			.order-info {
				flex: 1;
			}
		}

		.content-box {
			padding: 24rpx;

			.content-box-left {
				-webkit-justify-content: center;
				justify-content: center;
				-webkit-align-items: center;
				align-items: center;

				.content-image {
					width: 152rpx;
					height: 152rpx;
				}
			}

			.content-box-right {
				-webkit-flex: 1;
				flex: 1;
				-webkit-justify-content: space-between;
				justify-content: space-between;
				padding-left: 34rpx;

				.content-text {
					height: 92rpx;
					line-height: 52rpx;
					font-size: 30rpx;
					text-align: left;
					overflow: hidden;
					word-break: break-all;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
				}

				.content-tag {
					margin-top: 18rpx;
				}
			}
		}

		.fee-box {
			margin: 0 24rpx;
			padding: 16rpx 0;
			border-top: 1px dashed #E0E0E0;

			.fee-item {
				-webkit-justify-content: space-between;
				justify-content: space-between;
				font-size: 24rpx;
				line-height: 42rpx;

				// margin-top: 16rpx;
				.fee-value {
					color: #999999;
				}
			}

			.refund-text {
				text-align: right;
				color: #FF6C25;
			}
		}

	}

	.top-content {
		margin: 58rpx 18rpx 0rpx;
		padding: 34rpx 24rpx 0rpx;
		background-color: #FFFFFF;
		border-radius: 40rpx 40rpx 16rpx 16rpx;
	}
</style>
